import React, {
  Component
} from 'react'
import {
  connect
} from 'react-redux';
import {
  bindActionCreators
} from 'redux'
import dynamic from 'next/dynamic'


import Row from 'antd/lib/row';
import Col from 'antd/lib/col';

const ProductItem = dynamic(
    import ('../productItem'));
const ShowcaseItem = dynamic(
    import ('../showcaseItem'));
const EmptyShowCase = dynamic(
    import ('./emptyshowcase'));



class ShowCase extends Component {
  constructor(props) {
    super(props);
  };

  render() {
    const {
      home,
      showcaseList
    } = this.props;
    const showcase = showcaseList || [];
    const showcaseLoading = home.showcaseLoading;
    return (
      <div>
      {
        showcaseLoading?<EmptyShowCase/> : (
          <div className="showcase">
            {
              (showcase && (showcase.length)>0)?(<Row>
                        <Col span={20} offset={2}>
                          {
                            showcase.map((item,i)=>{
                                return item.itemList&&item.itemList.length?(<div key={i}>
                                  <h3 className="case-name">
                                    <div className="case-jewelry">
                                      <span></span>
                                    </div>
                                    <span>
                                      <span className="title-icon"><i className="title-i-1"></i><i></i></span>
                                      <i className="toy-icon"></i>
                                      <span>{item.name}</span>
                                      <i className="toy-icon"></i>
                                    </span>
                                  </h3>
                                  {
                                    this.getDeferrentItem(item)
                                  }
                                </div>):null
                              })
                          }
                      </Col>
                    </Row>):null
            }
          </div>)
      }
    </div>)
  }

  getDeferrentItem(item){
    //橱窗产品的展示样式分为：2/8/12
    if(item.itemCount <= 2){
      return (<Row type="flex" justify="left" gutter={16} className="showcase-2">
                {
                  item.itemDetailList.map((list,n)=>{
                    return <Col key={n} span={12} >
                      {list?<ShowcaseItem productinfo={list} />:null}
                    </Col>
                  })
                }
              </Row>)
    }else if(item.itemCount <= 8){
      return (<Row type="flex" justify="left">
        {
          item.itemDetailList.map((list,n)=>{
            return <Col key={n} span={6} >
              {list?<ProductItem productinfo={list} indexNum={4} />:null}
            </Col>
          })
        }
      </Row>)
    }else if(item.itemCount <= 12){
      return (<Row type="flex" justify="left" className="showcase-6">
        {
          item.itemDetailList.map((list,n)=>{
            return <Col key={n} span={4} >
              {list?<ProductItem productinfo={list} indexNum={6} />:null}
            </Col>
          })
        }
      </Row>)
    }
  }
}

const mapStateToProps = ({
  home,
  headers
}) => ({
  home,
  showcaseList: headers.showcaseList
});


export default connect(mapStateToProps, null)(ShowCase)